<template>
  <div>
    <div class="header">
      <P class="name">蘑菇博客</P>
      <ul class="navbar" ref="change">
        <li
          class="title"
          v-for="item in navMsg"
          :key="item"
          @click="goPage(item.path)"
        >{{item.name}}</li>
        <li>
          <el-select
            v-model="value"
            class="search"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              @click.native="findBlogInfo(item.label)"
            ></el-option>
          </el-select>
          <el-button type="primary" @click="search()" class="header_btn">搜索</el-button>
        </li>
        <li
          class="tit001"
          v-if="username==null"
          v-for="item in loginMsg"
          :key="item"
          @click="goPage(item.path)"
        >{{item.name}}</li>
        <li class="tit001" v-if="username!=null" @click="goPage('blog')">创作中心</li>
        <!-- <li class="tit" v-if="username!=null"  @click="goPage(item.path)">个人中心</li> -->
        <el-dropdown v-if="username!=null">
          <span class="tit1">
            个人中心
            <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
          </span>
          <el-dropdown-menu slot="dropdown" class="xiala">
            <div @click="updateUser">
              <el-dropdown-item icon="el-icon-edit-outline">修改信息</el-dropdown-item>
            </div>
            <el-dropdown-item icon="el-icon-notebook-2">我的博客</el-dropdown-item>
            <div @click="myComment">
              <el-dropdown-item icon="el-icon-chat-dot-square">我的评论</el-dropdown-item>
            </div>
            <div @click="signOut">
              <el-dropdown-item icon="el-icon-circle-close">退出登录</el-dropdown-item>
            </div>
          </el-dropdown-menu>
        </el-dropdown>
      </ul>
    </div>
    <el-drawer
      title="修改信息"
      :visible.sync="drawers"
      :direction="directions"
      :before-close="handleClose"
    >
      <div class="right">
        <el-form  label-width="80px" :model="users">
          <el-form-item  label="用户名">
            <el-input  v-model="users.username"></el-input>
          </el-form-item>
          <el-form-item  label="密码">
            <el-input  v-model="users.password"></el-input>
          </el-form-item>
          <el-form-item  label="昵称">
            <el-input placeholder="请输入昵称" v-model="users.nickName"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="sex" class="sex">
              <el-radio-button label="男"></el-radio-button>
              <el-radio-button label="女"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="生日">
            <el-input placeholder="请输入生日" v-model="users.birthday"></el-input>
          </el-form-item>
          <el-form-item label="签名">
            <el-input placeholder="请输入签名" v-model="users.summary"></el-input>
          </el-form-item>
          <el-form-item label="QQ号">
            <el-input placeholder="请输入QQ号" v-model="users.qqNumber"></el-input>
          </el-form-item>
          <el-form-item label="微信号">
            <el-input placeholder="请输入微信号" v-model="users.weChat"></el-input>
          </el-form-item>
          <el-form-item label="职业">
            <el-input placeholder="请输入职业" v-model="users.occupation"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="info" style="margin-left:50px;" @click="edit">确认</el-button>
      </div>
    </el-drawer>

    <el-drawer
      title="我的评论"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <div v-for=" comm in comment" :key="comm.uid">
        <p>{{comm.userName}}评论了{{comm.toUsername}}:{{comm.content}}</p>
      </div>

    </el-drawer>
  </div>
</template>

<script>
import axios from "axios";
import Cookies from "js-cookie";
export default {
  name: "Header",
  data() {
    return {
      users:{},
      sex: "",
      input:"",
      drawer: false,
      direction: "ltr",
      drawers: false,
      directions: "rtl",
      labelPosition: "right",
      username: "",
      formLabelAlign: {},
      options: [],
      value: [],
      list: [],
      loading: false,
      states: [],
      userUid:"",
      comment:[],
      bloginf:[],
      navMsg: [
        {
          name: "首页",
          path: "/"
        },
        {
          name: "关于我",
          path: "/about"
        },
        {
          name: "归档",
          path: "/archive"
        },
        {
          name: "分类",
          path: "/item"
        },
        {
          name: "标签",
          path: "/tag/5c4c541e600ff422ccb371ee788f59d6"
        },
        {
          name: "留言板",
          path: "/Message"
        }
      ],
      loginMsg: [
        {
          name: "登录",
          path: "/login"
        },
        {
          name: "注册",
          path: "/registry"
        }
      ]
    };
  },
  methods: {
    findBlogInfo:function(x){
      var _this = this;
      axios.get('/api/blogs/getBlogByBlogTitle/'+x).then(function (res) {
          _this.bloginf = res.data
        _this.findBlogByUid(_this.bloginf[0].uid);
      })
    },
    findBlogByUid:function (uid) {
      // alert(uid)
      this.$router.push('/bloginfo/'+uid);
    },
    findUserByUserName:function(){
      var _this = this;
      var name = Cookies.get("username");
      axios.get('/api/user/message/'+name).then(function (res) {
        _this.findMyComment(res.data.uid);
      })
    },
    findMyComment:function(x){
      var _this = this;
      axios.get('/api/user/findMyCommentByUid/'+x).then(function (res) {
         _this.comment = res.data;
      })
    },
    getUserByUserName:function(){
      var _this = this;
      axios.get('/api/user/message/'+_this.username).then(function (res) {
        _this.users = res.data;
        if(_this.users.gender==1){
            _this.sex = "男";
        }else {
          _this.sex = "女";
        }
      })
    },
    updateUser: function() {
      this.drawers = true;
    },
    myblog: function() {
      this.drawer = true;
    },
    myComment: function() {
      this.drawer = true;
    },
    signOut: function() {
      Cookies.remove("username");
      Cookies.remove("token");
      location.reload();
      this.$router.push('/');
    },
    goPage: function(x) {
      this.$router.push({ path: x });
      location.reload();
    },
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    findAllTitle: function() {
      var _this = this;
      axios.get("/api/search/findAll").then(function(res) {
        _this.states = res.data;
        _this.list = _this.states.map(item => {
          return { value: `value:${item}`, label: `${item}` };
        });
      });
    },
    edit:function () {
      var _this=this;
      _this.formLabelAlign.username=Cookies.get("username");
      if(this.sex=="男"){
        this.users.gender=1;
      }else {
        this.users.gender=0
      }
      axios.post("/api/user/edit",_this.users).then(function (res) {

           if (res.data="修改成功"){
             alert("提交成功")
             _this.$router.push('/myPage');
             _this.drawers = false;
           }
           else{
             alert("请重新登录")
           }

      })

    }
  },
  mounted(){
    this.findAllTitle();
    this.username = Cookies.get("username");
    this.getUserByUserName();
    this.findUserByUserName();
  }
};
</script>

<style>
  .sex{
    float: left;
  }
.right {
  width: 400px;
  height: 700px;
  float: left;
}
.xiala {
  width: 150px;
}
.header {
  height: 75px;
  background-color: black;
}
.title {
  color: #ffffff;
  font-size: 20px;
  float: left;
  list-style-type: none;
  line-height: 75px;
  margin-right: 50px;
}
.tit001 {
  color: #ffffff;
  font-size: 20px;
  float: right;
  line-height: 40px;
  margin-right: 50px;
  list-style-type: none;
}
.tit1 {
  color: #ffffff;
  font-size: 20px;
  float: right;
  line-height: 40px;
  list-style-type: none;
}
.name {
  font-size: 30px;
  float: left;
  line-height: 15px;
  margin-left: 100px;
  color: cornflowerblue;
  margin-right: 100px;
}
.search {
  margin-top: 18px;
  list-style-type: none;
  float: left;
}
.header_btn {
  float: left;
  margin-top: 18px;
  margin-left: -5px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.la {
  margin-left: 50px;
}
.el-dialog {
  height: 500px;
}
.login_form {
  width: 400px;
  float: left;
}
.reg_form {
  width: 400px;
  float: right;
  margin-right: 20px;
}
</style>
